<template>
  <div class="date-picker">
    <el-date-picker v-model="date" :type="type" start-placeholder="开始日期" end-placeholder="结束日期"
                    :default-time="['00:00:00', '23:59:59']" @change="changeTimeValue" :picker-options="pickerOptions"
                    value-format="timestamp" :disabled="disabled"></el-date-picker>
  </div>
</template>

<script>
	export default {
		name: "index",
		props: {
			value: {
				type: Array,
				default: () => []
			},
			disabled: {
				type: Boolean,
				default: () => false
			},
			type: {
				type: String,
				default: () => 'datetimerange'
			},
      rangeType: {
        type: String,
        default: () => ''
      },
		},
		data() {
			return {
				pickerOptions: {
					shortcuts: [{
						text: '近七天',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
							picker.$emit('pick', [start, end]);
						}
					}, {
						text: '近三十天',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
							picker.$emit('pick', [start, end]);
						}
					}, {
						text: '近九十天',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
							picker.$emit('pick', [start, end]);
						}
					}]
				},
				date: this.value
			};
		},
		computed: {},
		watch: {
			value(val) {
				this.date = val;
			}
		},
		components: {},
		methods: {
			changeTimeValue() {
        if (this.rangeType === 'month') {
          if (this.date[0] && this.date[1] && new Date(this.date[1]).getTime() - new Date(this.date[0]).getTime() > 30 * 24 * 60 * 60 * 1000) {
            this.date[1] = new Date(this.date[0]).getTime() + 30 * 24 * 60 * 60 * 1000
            this.$message.warning('时间选择超过一个月，系统自动处理')
          }
        }

        this.$emit('input', this.date);
			}
		},
		mounted() {
		},
		created() {
		}
	}
</script>

<style scoped lang="less">
  @import "../../style/common/base.less";

  .date-picker {
    display: flex;
    align-items: center;

    .el-date-editor.el-input__inner {
      border-color: transparent !important;
      background-color: transparent;
      width: 100%;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
  }

  /deep/ .el-date-editor .el-range__icon {
    display: none;
  }

  /deep/ .el-date-editor .el-range__close-icon {
    display: none;
  }

  /deep/ .el-date-editor .el-range-input {
    border-radius: 4px;
    border: 1px solid #C7CBD1;
    color: @fontColor;
    height: 40px;
    padding: 0 5px;
    flex: 1;
  }

  /deep/ .el-date-editor .el-range-separator {
    width: auto;
  }

  /deep/ .el-date-editor input:first-child {
    margin-left: 0;
  }

  /deep/ .el-icon-circle-close::before {
    display: none;
  }

</style>
